<template>
  <a-layout id="components-layout-demo-top-side">
    <a-layout-header class="header">
      <a-space>
        <img alt="Logo" src="./assets/xtrace.png" class="logo" />
        <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;Attack Tracker</p>
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['0']"
          :style="{ lineHeight: '64px' }"
          :selectedKeys="selectedKey"
        >
          <a-menu-item key="/">
            Home
            <router-link to="/" />
          </a-menu-item>
          <a-menu-item key="/dashboard">
            Dashboard
            <router-link to="/dashboard" />
          </a-menu-item>
          <a-menu-item key="/user">
            User
            <router-link to="/user" />
          </a-menu-item>
        </a-menu>
      </a-space>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-layout style="padding: 24px 0; background: #fff">
        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
          <RouterView />
        </a-layout-content>
      </a-layout>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      攻击溯源平台 NJUST 2021 科研训练项目
    </a-layout-footer>
  </a-layout>
</template>

<script lang="ts">
export default {
  data() {
    return {};
  },
  methods: {},
  computed: {
    selectedKey: function () {
      return [this.$route.path];
    },
  },
};
</script>

<style>
.title {
  width: 120px;
  height: 15px;
  margin: -32px 0 0 0;
  font-size: large;
  color: white;
}

.logo {
  float: left;
  width: 31px;
  height: 30px;
}
</style>